<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 布局练习</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>CSS 布局及动画</h1>
    </header>
    <main>
        <section>
            <h2>float布局</h2>
            <p>使用float属性进行布局，虽然比较繁琐，但是非常灵活，可以实现各种复杂的布局。</p>

        </section>
        <section>
            <h2>flexbox</h2>
            <p>Flex box 布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺
                寸不固定的时候更能表面出它的优势，它能够自动识别子元素的尺寸，从而为盒装模型提供更高的灵活性。</p>
            <div id="flexbox">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <P>5</P>
                <p>6</p>
            </div>

        </section>
        <section>

        </section>
    </main>
    <footer> </footer>
</body>

</html>